<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation({id:0})" v-if="hqedit">新增</Button>
            <Table size="small" :loading="tableLoading" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="+row.status === 1" status="success" text="正常" />
                    <Badge v-if="+row.status === 0" status="error" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation(row)" v-if="hqedit">编辑</a>
                    <Divider type="vertical" v-if="hqdelete"/>
                    <a class="deleteBtn" v-if="hqdelete" @click="modalDelete(row)">删除</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
            <Page
                show-total
                show-elevator
                show-sizer
                :total="total"
                :current.sync="params.page"
                :page-size="params.pageSize"
                :page-size-opts="pageOpts"
                @on-change="formSize" transfer
                @on-page-size-change="formChangePage"
            />
            </div>
        </Card>
        <Modal v-model="modal" :title="edit ? '编辑' : '新增'" :mask-closable="false" @on-cancel="handleDrawerCancel()">
            <Form :model="formItem" :rules="ruleValidate" ref="formItem" :label-width="80">
                <FormItem label="药品名称" prop="drug_name">
                   <Input v-model="formItem.drug_name" placeholder="请输入药品名称" clearable></Input>
                </FormItem>
                <FormItem label="类型">
                   <Select v-model="formItem.drug_type" placeholder="请选择药品类型">
                        <Option :value="1">静滴</Option>
                        <Option :value="2">肌注</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位" prop="drug_unit">
                   <Input v-model="formItem.drug_unit" placeholder="请输入药品单位" clearable></Input>
                </FormItem>
                <FormItem label="排序">
                    <InputNumber :min="0" v-model="formItem.sort"></InputNumber>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { medicineList, updateMedicine, delMedicine } from '@api/medicine';
    export default {
        name: 'doctor',
        data () {
            return {
                // 请求参数
                params: {
                    page: 1,
                    pageSize: 10
                },
                hqdelete: false,
                hqedit: false,
                total: 0,
                pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
                modal: false,
                edit: false,
                loading: false,
                tableLoading: false,
                formItem: {
                    id: undefined,
                    drug_name: '',
                    drug_unit: '',
                    drug_type: 1,
                    sort: 0,
                    status: true
                },
                doctorArr: [],
                ruleValidate: {
                    drug_name: [
                        { required: true, message: '药品名称不可为空', trigger: 'blur' }
                    ],
                    drug_unit: [
                        { required: true, message: '请输入药品单位', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        title: '药品名称',
                        key: 'drug_name',
                        minWidth: 200
                    },
                    {
                        title: '类型',
                        key: 'drug_type',
                        width: 100
                    },
                    {
                        title: '单位',
                        key: 'drug_unit',
                        width: 100
                    },
                    {
                        title: '排序',
                        key: 'sort',
                        width: 100
                    },
                    {
                        title: '状态',
                        slot: 'status',
                        width: 100
                    },
                    {
                        title: '操作',
                        slot: 'operation',
                        width: 140
                    }
                ],
                data: []
            }
        },

        mounted () {
            this.initial();
            this.state = JSON.parse(localStorage.getItem('poweredit'));
            console.log(this.state, 'this.state')
            for (let item of this.state) {
                if (item.name === '输液药品删除') {
                    this.hqdelete = item.bool
                } else if (item.name === '输液药品新增、编辑') {
                    this.hqedit = item.bool
                }
            }
        },
        methods: {
            initial () {
                this.askData()
            },
            askData () {
                medicineList(this.params).then(res => {
                    this.data = res.list
                    this.total = res.total
                })
            },
            /* @函数功能: 分页 */
            formSize (e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage (e) {
                this.params.pageSize = e;
                this.askData();
            },
            handleAllocation (row) {
                this.formItem = {
                    id: 0,
                    drug_name: '',
                    drug_unit: '',
                    drug_type: 1,
                    sort: 0,
                    status: true
                }
                if (row.id === 0) {
                    this.edit = false;
                    this.modal = true;
                } else {
                    this.edit = true;
                    this.modal = true;
                    this.formItem = {
                        id: row.id,
                        drug_name: row.drug_name,
                        drug_unit: row.drug_unit,
                        drug_type: +row.drug_type_id,
                        sort: +row.sort,
                        status: row.status
                    }
                }
            },
            handleDrawerCancel () {
                this.modal = false;
                this.edit = false;
                this.$refs['formItem'].resetFields()
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const params = {
                            id: this.formItem.id,
                            drug_name: this.formItem.drug_name,
                            status: this.formItem.status ? '1' : '0',
                            drug_type: this.formItem.drug_type,
                            drug_unit: this.formItem.drug_unit,
                            sort: this.formItem.sort
                        }
                        const data = {
                            drug_name: this.formItem.drug_name,
                            status: this.formItem.status ? '1' : '0',
                            drug_unit: this.formItem.drug_unit,
                            drug_type: this.formItem.drug_type,
                            sort: this.formItem.sort
                        }
                        if (this.edit) {
                            this.updateSubmit(params);
                        } else {
                            this.createSubmit(data);
                        }
                    }
                })
            },
            createSubmit (params) {
                updateMedicine(params).then((res) => {
                    this.$Message.success(' 创建成功');
                    this.loading = false;
                    this.askData();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            updateSubmit (params) {
                updateMedicine(params).then((res) => {
                    this.$Message.success(' 修改成功');
                    this.loading = false;
                    this.askData();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 删除
            modalDelete (row) {
                const param = {
                    id: row.id
                }
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '是否确认删认此项目!',
                    onOk: () => {
                        this.deleteSubmit(param);
                    }
                });
            },
            deleteSubmit (params) {
                delMedicine(params).then(() => {
                    this.$Message.success(' 删除成功');
                    this.askData();
                })
            }
        }
    }
</script>

<style scoped>
</style>
